<template>
    <div class="newPartner">
         <div class="newPartner_top">
			<div class="into_index">首页<i class="el-icon-close"></i></div>
			<div class="current">合作商详情<i class="el-icon-close"></i></div>
		</div>
        <!-- 商家类型与返回 -->
        <div class="newPartner_type">
            <div>创客机构列表/<span>创客机构详情</span></div>
            <el-button @click="backList" type="success">返回</el-button>
        </div>
        
        <!-- 新增商家信息 -->
        <div class="newPartner_info">
            <!-- 头部nav -->
            <div class="newPartner_nav">
                <div class="newPartner_navItem" :class="{'navItem_active':!navStatus}" @click="needInfo">基础信息<div class="navBorder" v-if="!navStatus"></div></div>
                <div class="newPartner_navItem" :class="{'navItem_active':navStatus}" @click="otherFile">附件<div class="navBorder" v-if="navStatus"></div></div>
            </div>
            <!-- 基础信息 -->
            <div class="newPartner_needInfo" v-if="!navStatus">
                <div class="newPartner_info">
                    <div class="newPartner_info_box">
                        <form action="#" class="form">
                            <div class="form_left">
                                <ul>
                                    <li><span>联系人</span><input type="text" v-model="form.name"></li>
                                    <li><span>邮箱</span><input type="text" ></li>
                                    <li><span>店铺名称</span><input type="text" maxlength="12" v-model="form.title"></li>
                                </ul> 
                            </div>
                            <div class="form_right">
                                <ul>
                                    <li><span>手机号</span><input type="text" v-model="form.phone"></li>
                                    <li><span>店铺地址</span><input type="text" v-model="form.corporation"></li>
                                </ul> 
                            </div>
                        </form>
                    </div>
                </div>
                <!-- 店铺图片-->
                <div class="shopRoom_img">
                    <!-- 店铺logo -->
                    <div class="shopRoom_logo">
                        <span>头像</span> 
                        <div v-if="form.avatar">
                            <img :src="form.avatar.path" alt="">
                        </div>
                        <div class="notImg" v-else></div>
                        <!-- <el-upload
                            action="#"
                            list-type="picture-card"
                            :limit="limit"
                            :on-preview="handlePictureCardPreview_logo"
                            :on-remove="handleRemove_logo">
                            <i class="el-icon-plus"></i>
                        </el-upload>
                        <el-dialog :visible.sync="dialogVisible_logo">
                            <img width="100%" :src="dialogImageUrl_logo" alt="">
                        </el-dialog> -->
                    </div>
                    <!-- 店铺背景 -->
                    <div class="shopRoom_bg">
                        <span>店铺背景图</span> 
                        <div v-if="form.back_thumb_url">
                            <img :src="form.back_thumb_url.path" alt="">
                        </div>
                        <div class="notImg" v-else></div>
                        <!-- <el-upload
                            action="#"
                            list-type="picture-card"
                            :limit="limit"
                            :on-preview="handlePictureCardPreview_bg"
                            :on-remove="handleRemove_bg">
                            <i class="el-icon-plus"></i>
                        </el-upload>
                        <el-dialog :visible.sync="dialogVisible_bg">
                            <img width="100%" :src="dialogImageUrl_bg" alt="">
                        </el-dialog> -->
                    </div>
                </div>

                <!-- 店铺简介 -->
                <!-- <div class="shopRoom_brief">
                    <span>个性签名</span>
                    <el-input
                        type="textarea"
                        maxlength="100"
                        v-model="shopRoombrief"
                        rows="5"
                        placeholder="店铺简介 "
                        class="resizeNone"
                    ></el-input>
                </div> -->

                <!-- 到期时间与状态 -->
                <div class="dueDate">
                    <div class="dueDate_time">
                        <span>到期时间</span>
                        <input type="text">
                    </div>
                    <div class="shopRoom_status">
                        <span>店铺状态</span>
                        <el-radio v-model="form.status" :label="1">正常</el-radio>
                        <el-radio v-model="form.status" :label="0">禁用</el-radio>
                    </div>
                </div>

                <div class="nextBtn">
                    <button @click="nextBtn">下一步</button>
                </div>
            </div>

            <!-- 附件上传 -->
            <div class="newPartner_otherFile" v-else>
                <div class="cardImg">
                    <span>法人身份证</span>
                    <div class="cardImg_positive">
                        <div>
                            <img :src="form.id_card_top.path" alt="">
                        </div>
                        <p>身份证正面</p>
                        <!-- <input type="file">
                        <div class="upTit">
                            <i class="el-icon-plus"></i>
                            身份证正面
                        </div> -->
                    </div>
                    <div class="cardImg_positive">
                        <div>
                            <img :src="form.id_card_back.path" alt="">
                        </div>
                        <p>身份证反面</p>
                        <!-- <input type="file">
                        <div class="upTit">
                            <i class="el-icon-plus"></i>
                            身份证反面
                        </div> -->
                    </div>
                </div>
                <div class="license">
                    <span>营业执照</span>
                    <div class="cardImg_positive">
                        <div class="" v-if="form.business_img">
                            <img :src="form.business_img.path" alt="">
                        </div>
                        <div v-else></div>
                        <!-- <input type="file">
                        <div class="upTit">
                            <i class="el-icon-plus"></i>
                            营业执照
                        </div> -->
                    </div>
                </div>

                <!-- 提交按钮 -->
                <div class="submitBtn">
                    <button @click="stepFn">上一步</button>
                </div>
            </div>

        </div>
    </div>
</template>

<script>
export default {
  data() {
    return {
        navStatus: false ,//点击基础信息或附件上传
        dialogImageUrl_logo: '',
        dialogVisible_logo: false,
        dialogImageUrl_bg: '',
        dialogVisible_bg: false,
        limit:1,
        roomStatus:1,     //店铺上下架状态
        shopRoombrief:'',  //店铺简介
        form:{},
    };
  },
  mounted() {
      let id = this.$route.query.id;
      console.log(id);
      this.getDesigDetail(id)
  },

  methods: {
    //获取详情
    getDesigDetail(id){
        this.$http.post('/api/root/Makers/view',{id}).then(res=>{
            console.log(res);
            if(res.code==1){
                this.form = res.data?res.data:{};
            }
        })
    },

    //点击基础信息
    needInfo() {
      this.navStatus = false;
    },

    // 点击下一步
    nextBtn(){
        this.navStatus = true
    },

    //点击上一步
    stepFn(){
        this.navStatus = false
    },

    // 点击附件选项
    otherFile() {
      this.navStatus = true;
    },
    // 点击返回到列表
    backList(){
      this.$router.back(1)
    },
  }
};
</script>

<style lang="less" scoped>
@import "makerDetail.less";
</style>
